<template>
    <div v-clickOutSide="handleHideSelect">
        <a-dropdown :trigger="['click']" :visible="visible" :class="visible ? 'active' : ''" :getPopupContainer="(node) => node.parentNode">
            <flexbox class="ant-dropdown-link dropdown-wrap" @click="visible = !visible">
                <!-- 用click控制显示，是因为需要点击范围之外隐藏 -->
                <span class="title-cont">
                    {{ showTitle }}
                </span>
                <DownOutlined style="margin-left: 4px" />
            </flexbox>
            <template #overlay>
                <div class="dropdown-body" v-empty="!isEmpty">
                    <div style="padding-bottom: 5px">
                        <a class="clear-text" v-if="!isEmpty" @click="handleClearAll">清除选择的内容</a>
                    </div>
                    <div style="max-height: 200px; overflow-y: auto">
                        <div v-for="(item, index) of options" :key="item.code" :class="index === 0 ? '' : 'margin-t-8'">
                            <span class="font-w-b">
                                {{ item.dimensionName }}
                            </span>
                            <flexbox v-for="elem of item.pmpDictionaryDTOs" :key="elem.code" class="margin-t-8">
                                <a-checkbox v-model:checked="elem.checked" v-fitText @change="handleCheckChange">
                                    {{ elem.dimensionName || elem.system }}
                                </a-checkbox>
                            </flexbox>
                            <a-divider type="column" class="margin-t-8" style="color: red" v-if="index !== options.length - 1" />
                        </div>
                    </div>
                </div>
            </template>
        </a-dropdown>
    </div>
</template>
<script lang="ts">
import store from '@/store';
import { deepClone } from '@/utils/util';
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    components: {
        DownOutlined
    },
    props: {
        max: {
            type: Number,
            default: 2
        },
        searchQuery: {
            type: Object,
            default: () => ({})
        }, //额外的查询参数
        disabled: {
            type: Boolean,
            default: true
        },
        type: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        defaultOptions: {
            type: Array,
            default: () => []
        },
        value: {
            type: String,
            default: ''
        }
    },
    emits: ['update:value'],
    setup(props, { emit }) {
        const state = reactive<any>({
            options: [],
            selectedKeys: [],
            visible: false,
            isEmpty: true
        });
        const showTitle = computed(() => {
            const targetArr = state.selectedKeys.map((item: Recordable) => item.dimensionName || item.system);
            if (targetArr.length) {
                return `${props.title}：${targetArr.join(',')}`;
            } else {
                return `${props.title}：${state.options.length ? '全部' : ''}`;
            }
        });
        const handleCheckChange = () => {
            let arr: any = [];
            state.options.forEach((item: Recordable) => {
                arr = [...item.pmpDictionaryDTOs.filter((elem: Recordable) => elem.checked), ...arr];
            });
            state.selectedKeys = [...arr];
            let selectedArr = [];
            if (state.selectedKeys.length) {
                selectedArr = state.selectedKeys.map((item: Recordable) => `${item.parentCode}-${item.code}`);
            }
            emit('update:value', selectedArr.length ? selectedArr.join(',') : null);
        };
        const handleClearAll = () => {
            state.selectedKeys = [];
            state.options = state.options.map((item: Recordable) => ({
                ...item,
                checked: false
            }));
            emit('update:value', null);
        };
        const handleHideSelect = () => {
            state.visible = false;
        };
        const init = () => {
            state.selectedKeys = [];
            const options = props.defaultOptions.length ? deepClone(props.defaultOptions) : store.getters.dicOptions[props.type];
            if (options && options.length) {
                state.options = options.map((item: Recordable) => {
                    const pmpDictionaryDTOs = item.pmpDictionaryDTOs.map((elem) => {
                        return {
                            ...elem,
                            checked: false,
                            parentCode: item.code //父级code
                        };
                    });
                    return { ...item, pmpDictionaryDTOs };
                });
            } else {
                state.options = [];
            }
            state.isEmpty = options ? !options.length : true;
            if (state.options.length) {
                if (!state.selectedKeys.length) {
                    emit('update:value', null);
                }
            } else {
                emit('update:value', null);
            }
        };
        // 1.初始化init 2.重置数据时
        watch(
            () => props.value,
            (n) => {
                if (n === null) {
                    init();
                }
            },
            {
                immediate: true
            }
        );
        return {
            ...toRefs(state),
            showTitle,
            handleCheckChange,
            handleClearAll,
            handleHideSelect
        };
    }
});
</script>
<style lang="less" scoped>
@import './styles/index.less';
</style>
